<template>
    <div>
        <a-modal
         v-model:visible="visibleShow"
         :title="'在线学习'"
         @cancel="visibleShow = false"
         width="100%"
         :footer="null"
         :dialogStyle="{top:'0px'}"
         wrapClassName="learningTasks-full-modal"
         >
            <div style="display: flex;justify-content: flex-end;margin-bottom: 5px;" >
                
                <a-button style="margin-right: 10px;" :loading="confirmLoading" class="blue-btn" @click="shandleSubmit" icon="check-circle">提交并关闭</a-button>
                <a-button @click="visibleShow = false" icon="close-circle">取消</a-button>
            </div>
            <div class="quality-system-content" v-if="visibleShow">
                <div style="display: flex;">
                    <div :style="{width: '30%'}">
                        <a-form :form="form" layout="inline" class="quality-system-form">
                            <a-form-item label="文件名称" class="flex-1-input-box">
                                <a-input
                                v-if="!formState.disabled"
                                v-model:value="formState.fwjmc"
                                placeholder="请输入文件名称"
                                v-decorator="[
                                    'fwjmc', { initialValue:formState.fwjmc, rules: rules.fwjmc}
                                ]"/>
                                <span v-else>{{ formState.fwjmc }}</span>
                            </a-form-item>
                            <a-form-item label="分类" class="flex-1-input-box">
                                <a-tree-select
                                    v-if="!formState.disabled"
                                    v-model:value="formState.ftype"
                                    :expandedKeys="expandedKeys"
                                    :tree-data="treeTypeList"
                                    :replaceFields='replaceFields'
                                    style="width:200px"
                                    placeholder="请选择分类"
                                    tree-default-expand-all
                                />
                                <span v-else>{{ formState.ftype }}</span>
                            </a-form-item>
                            <!-- <a-form-item label="文件编号" class="flex-1-input-box">
                                <a-input
                                v-if="!formState.disabled"
                                placeholder="请输入文件编号"
                                v-model:value="formState.fwjbh"/>
                                <span v-else>{{ formState.fwjbh }}</span>
                            </a-form-item>
                            <a-form-item label="受控版本" class="flex-1-input-box">
                                <a-input
                                v-if="!formState.disabled"
                                placeholder="请输入受控版本"
                                v-model:value="formState.fskbb"/>
                                <span v-else>{{ formState.fskbb }}</span>
                            </a-form-item>
                            <a-form-item label="修改次数" class="flex-1-input-box">
                                <a-input
                                v-if="!formState.disabled"
                                style="width:200px"
                                placeholder="请输入修改次数"
                                v-model:value="formState.fxgcs"/>
                                <span v-else>{{ formState.fxgcs }}</span>
                            </a-form-item>
                            <a-form-item label="实施日期" class="flex-1-input-box">
                                <a-date-picker
                                v-if="!formState.disabled"
                                style="width:200px"
                                placeholder="请输入实施日期"
                                v-model:value="formState.fssrq"
                                />
                                <span v-else>{{ formState.fssrq }}</span>
                            </a-form-item> -->
                            <a-form-item label="上传日期" class="flex-1-input-box">
                                <a-date-picker
                                v-if="!formState.disabled"
                                style="width:200px"
                                placeholder="请输入上传日期"
                                v-model:value="formState.fscrq"
                                />
                                <span v-else>{{ formState.fscrq }}</span>
                            </a-form-item>
                            <a-form-item label="状态" class="flex-1-input-box">
                                <a-radio-group v-model="formState.fzt" v-if="!formState.disabled">
                                    <a-radio value="现行有效">
                                        现行有效
                                    </a-radio>
                                    <a-radio value="无效">
                                        无效
                                    </a-radio>
                                </a-radio-group>
                                <span v-else>{{ formState.fzt }}</span>
                            </a-form-item>
                            <a-form-item label="学习意见" class="flex-1-input-box">
                                <a-textarea
                                    v-model="formState.opinion"
                                    placeholder="请输入学习意见"
                                    :autosize="{ minRows: 2, maxRows: 10000 }"
                                    v-decorator="[
                                        'opinion', { initialValue:formState.opinion, rules: rules.opinion}
                                    ]" />
                            </a-form-item>
                            <a-form-item >
                                <!-- <a-button style="margin-right: 10px;">取消</a-button>
                                <a-button :loading="confirmLoading" class="blue-btn" @click="shandleSubmit">提交并关闭</a-button> -->
                                <a-button style="margin-left: 85px;" :loading="downloadFileLoading" class="blue-btn" type="primary" @click="downloadClick" icon="download">下载文件</a-button>
                            </a-form-item>
                        </a-form>
                    </div>
                    <div style="flex: 1;margin-left: 5px;">
                        <!-- <a-button :loading="downloadFileLoading" class="blue-btn" type="primary" @click="downloadClick">下载</a-button> -->
                        <iframe
                            v-if="iframeSrc"
                            :key="iframeKey"
                            :src="iframeSrc"
                            ref="iframeServerEditingRef"
                            scrolling="auto"
                            width="100%"
                            :height="(windowInnerHeight -110 )+'px'"
                            style="border: 0;"
                        ></iframe>
                    <span v-else>当前文件发生错误，请刷新！</span>
                    </div>
                </div>
                 <div v-if="!formState.disabled" style="
                    display: flex; justify-content: flex-end;
                    margin-top: 20px; width: 100%;
                    background-color: #fff;">
                    <a-button @click="visibleShow = false">取消</a-button>
                    <a-button style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)" icon="save">保存</a-button>
                    <a-button class="blue-btn" type="primary" @click="handleOk(false)" icon="check-circle">保存并关闭</a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment'
import {   queryById, downloadFile, spcyZltxwjHistoryGetZltxwjFile,submitZltxwjFlow } from './service/index'
import blobType from '@/common/blobType'
import YchConstant from '@/api/YchConstant'
export default {
    components:{
    },
    props:{

    },
    data(){
        return{
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            treeTypeList:[],
            visibleShow:false,
            replaceFields: {
                children: 'children', //后端数组层级的名字
                key: 'key', //一般是id
                title: 'value',
                value: 'value' //onSelect(selectedKeys)的selectedKeys的参数值，便于获取然后返回给后端
            },
            expandedKeys:'',
            rules:{
                fwjmc: [{
                     required: true,
                     message: '请输入文件名称',
                     trigger: 'blur',
                 }],
                opinion: [{
                     required: true,
                     message: '请输入办理意见',
                     trigger: 'blur',
                }],
            },
            fwjmc:'',
            downloadFileLoading:false,
            downloadFun:[downloadFile,spcyZltxwjHistoryGetZltxwjFile,],
            iframeSrc:'',
            iframeKey:null,
            windowInnerHeight:window.innerHeight,
            confirmLoading: false,
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        getData(val,treeData){//无id先保存再修改
            this.formState = {}
            //console.log(val)
            this.treeTypeList = treeData
            this.fwjmc = val.fwjmc
            if(val.disabled){
                this.formState = {
                    ...val,
                    fssrq:val.fssrq?moment(val.fssrq).format('YYYY-MM-DD'):'',
                    fscrq:val.fscrq?moment(val.fscrq).format('YYYY-MM-DD'):'',
                }
            }else{
                this.formState = {
                    ...val,
                    fssrq:val.fssrq?moment(val.fssrq,'YYYY-MM-DD'):'',
                    fscrq:val.fscrq?moment(val.fscrq,'YYYY-MM-DD'):'',
                }
            }
            if(this.formState.zltxwjid){
                //console.log('下载文件---')
                this.getIframe()
            }
        },
        getIframe(){
            //console.log('下载文件---进来了')
            this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/flow-zltxwj/getFileCross?zltxwjid='+this.formState.zltxwjid
            //console.log('下载文件---iframeSrc',this.iframeSrc)
            this.iframeKey = Date.now()
        },
        getQueryById(id){
            queryById({id:id}).then(res=>{
                if(res.code == 200){
                    this.formState = res.result
                    let val = res.result
                    this.formState = {
                        ...this.formState,
                        ...val,
                        fssrq:val.fssrq?moment(val.fssrq,'YYYY-MM-DD'):'',
                        fscrq:val.fscrq?moment(val.fscrq,'YYYY-MM-DD'):'',
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        downloadClick(){
            var that = this
            this.downloadFileLoading = true
            var fileName = this.formState.fwjmc+this.formState.fwjlx
            //console.log(fileName)
            let param = {id: this.formState.id}

            this.downloadFun[this.formState.funIndex](param).then((data) => {
                this.downloadFileLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]), { type: blobType.type[blobType.suffix.indexOf(this.formState.fwjlx)] })
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        // 提交
        shandleSubmit(){//提交
            this.form.validateFields((err, values) => {
                if (!err) {
                    var that = this
                    that.confirmLoading = true
                    that.$confirm({
                        title: '您确定要提交吗?',
                        onOk() {
                            let data = {
                                jobid: that.formState.jobid,
                                ywid: that.formState.zltxwjid,
                                // dbrid:values.dbrid.join(','),
                                opinion: that.formState.fhjmc == '申请'?that.formState.fxdly:that.formState.opinion,
                                smgflag: that.formState.smgflag?'是':'否',
                                map: {
                                    fssrq: that.formState.fssrq ? moment(that.formState.fssrq).format('YYYY-MM-DD') : '',
                                    fscrq: that.formState.fscrq ? moment(that.formState.fscrq).format('YYYY-MM-DD') : '',
                                    fwjmc: that.formState.fwjmc,
                                    ftype: that.formState.ftype,
                                    forder: that.formState.forder,
                                    fskbb: that.formState.fskbb,
                                    fwjbh: that.formState.fwjbh,
                                    fsqr: that.formState.fsqr,
                                    fsqks: that.formState.fsqks,
                                    fxglx: that.formState.fxglx,
                                    fxdly: that.formState.fxdly,
                                    fqcsm: that.formState.fqcsm,
                                    fxgcs: that.formState.fxgcs,
                                    fxgxxryid: that.formState.fxgxxryid,
                                }
                            }
                            submitZltxwjFlow(data).then(res=>{
                                if(res.code == 200){
                                    // that.$router.push('/assessCheck/qualityFlow/indexFlowExamine')
                                    that.$message.success(res.message)
                                    that.$emit('successReturn')
                                    that.visibleShow = false
                                }else{
                                    that.$message.warning(res.message)
                                }
                                that.confirmLoading = false
                            })
                        },
                        onCancel() {},
                    });
                }
            })
        },
    }
}
</script>
<style lang="less">
.learningTasks-full-modal {
    .ant-modal {
        padding-bottom: 0px !important
    }
    .ant-modal-body {
        height: calc(100vh - 50px) !important;
    }
}
.quality-system-form{
    .ant-form-item-label{
        width: 80px;
        background-color: #e6f7ff;
        margin-top: 4px;
        height: 32px;
        font-weight: 600;
        line-height: 32px;
        margin-right: 5px;
    }
    .ant-form-item-control-wrapper{
        width: 200px;
    }
    .ant-upload-list{
        display: none !important;
    }
    .file-box-v{
        display: inline-block;
        // flex-direction: column;
        // align-items: center;
        // justify-content: center;
        border: 1px solid #d9d9d9;
        // width: 104px;
        // height: 104px;
        padding: 0 10px;
        overflow: hidden;
        border-radius: 2px;

    }
    .file-icon-v{
        font-size: 42px;
        color: rgb(24, 144, 255);
    }
    .flex-1-input-box{
            display: flex;
            width: 100%;
            .ant-form-item-control-wrapper{
            flex: 1;
        }
        .ant-form-item-control{
            width: 100%;
        }
            .ant-input{
                width: 100% !important;
            }
        }
}
</style>
